<template>
	<view>
		<view class="list">
			<view class="fixbg" :style="{'background': 'url('+ playList.coverImgUrl +')'}"></view>
			<musicHead title='歌单' :icon="true" style="color: white;"/>
			<view class="container">
				<scroll-view scroll-y="true" >
					<view class="list-head">
						<view class="list-head-img">
							<image :src="playList.coverImgUrl"></image>
							<text class="iconfont icon-yousanjiao">{{num}}</text>
						</view>
						<view class="list-head-text">
							<view>
								云音乐{{playList.name}}
							</view>
							<view>
								<image src="../../static/pic/logo.png" ></image>
								<text>网易云音乐</text>
							</view>
							<view @click="toMsg(playList.id)">
								{{playList.description}} 
							</view>
							<view class="btn">
								>
							</view>
						</view>
					</view>
					<button open-type="share" class="list-share">
						<text class="iconfont icon-fenxiang"></text>
						<text>分享给微信好友</text>
					</button>
					<view class="list-music">
						<view class="list-music-head" @click="">
							<view>
								<text class="iconfont icon-bofang"></text>
							</view>
							<view>
								<text>播放全部</text>
							</view>
							<view>
								<text>(共{{playList.tracks.length}}首)</text>
							</view>
						</view>
						<view class="list-body" >
							<view class="list-body-item" 
							@click="toPlayerMusic(item.id)"  
							v-for="(item, index) in playersList"
							:key="item.id" >
								<view class="item-song-index">
									<text>{{index + 1}}</text>
								</view>
								<view class="item-song-info">
									<view class="item-song-info-name">
										<text>{{item.name}}</text>
									</view>
									<view class="item-song-info-player">
										{{item.ar[0].name}} - {{item.al.name}}
									</view>
								</view>
								<view class="item-song-icon">
									<text class="iconfont icon-bofang_o"></text>
								</view>	
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import'@/common/iconfont.css'
	import musicHead from "../../components/MusicHead/MusicHead.vue" 
	import {playerList,playersList} from "../../common/api.js"
	export default {
		data() {
			return {
				playList:{},
				playersList:[],
				num: "",
				playerName:[],
				listId:0
			}
		},
		methods: {
			// 跳转简介页面方法
			toMsg(id){
				uni.navigateTo({
					url:'../listInfo/listInfo?id=' + id
				})
			},
			// 跳转至个人歌手页面
			toPlayerMusic(id){
				uni.reLaunch({
					url:'../playerMusic/playerMusic?id=' + id
				})
			},
			// 将总人数进行过滤来进行区分：个、十、百、千、万
			Format(val) {
				   	let nVal= ['', '', ''];
				   	let fr = 1000;
					let num = 3;
					while (val / fr >= 1) {
						fr *= 10;
						num += 1;
					}
					if (num <= 4) { // 千
				    	nVal[1] = '千';
						nVal[0] = parseInt(val / 1000) + '';
					} else if (num <= 8) { // 万
						const str = parseInt(num - 4) / 3 > 1 ? '千万' : '万';
						const fm = '万' === str ? 10000 : 10000000;
						nVal[1] = str;
						nVal[0] = (val / fm) + '';
					} else if (num <= 16) {// 亿
						let str = (num - 8) / 3 > 1 ? '千亿' : '亿';
						str = (num - 8) / 4 > 1 ? '万亿' : str;
						str= (num - 8) / 7 > 1 ? '千万亿' : str;
						
						let fm = 1;
						if ('亿' === str) {
							fm = 100000000;
						} else if ('千亿' === str) {
							fm = 100000000000;
						} else if ('万亿' === str) {
							fm = 1000000000000;
						} else if ('千万亿' === str) {
							fm = 1000000000000000;
						}
						nVal[1] = str;
						nVal[0] = parseInt(val / fm) + '';
					}
					if (val < 1000) {
						nVal[1] = '';
						nVal[0] = val + '';
					}
				  return nVal.join('');
				}
		},
		components:{musicHead},
		onLoad(id) {
			// 接受传入的id
			this.listId = id.id
			// 榜单对应歌曲列表的网络请求（请求歌名、歌手.....）
			playerList(this.listId).then((res) => {
				this.playList = res
				this.num = this.Format(res.playCount)
				this.$store.commit("INIT_TOPLISTIDS",res.trackIds)
			})
			// 榜单对应歌曲列表的具体信息的网络请求（请求歌名、歌手.....）
			playersList(this.listId).then((res) => {
				this.playersList = res
			})
			/*
			进行对url截取获取跳转页面的id
			let strUrl = window.location.href;
			let arrUrl=strUrl.split("/");
			let strPage=arrUrl[arrUrl.length-1];
			let str = strPage.replace(".html","").replace(".htm","")
			let numArr = parseInt(str.match(/\d+/g))
			
			网络请求块
			
			promise封装版（网络请求升级版）
			1.请求首页跳转过来的数据，通过id来对数据中的数组过滤得到id对应的数据
			topList().then((res) => {
				this.playList = res.filter(item => (item.id === numArr))
			})
			低廉未封装版（网络请求低价版）
			uni.request({
				url:`http://localhost:3000/playlist/detail?id=` + numArr ,
				success:(res) => {
					console.log(res)
				}
			})
			*/
		},
	}
</script>

<style>
.list-head{
	display: flex;
	margin: 30rpx;
}
.list-head-img{
	width: 264rpx;
	height: 264rpx;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	margin-right: 40rpx;
}
.list-head-img image{
	width: 100%;
	height: 100%;
}
.list-head-img text{
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	color: white;
}
.list-head-text{
	display: flex;
	flex-direction: column;
	width: 380rpx;
	color: white;
}
.list-head-text view:nth-child(1){
	font-size: 40rpx;
}
.list-head-text view:nth-child(2){
	position: relative;
	top:20rpx;
	height: 54rpx;
	line-height: 54rpx;
	color: #eee;
}
.list-head-text view:nth-child(2) image{
	width: 54rpx;
	height: 54rpx;
	border-radius: 100%;
}
.list-head-text view:nth-child(2) text{
	position: absolute;
	top:0;
	left: 80rpx;
}
.list-head-text view:nth-child(3){
	width: 370rpx;
	height: 62rpx;
	margin-top: 50rpx;
	font-size: 20rpx;
	color: #eee;
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.btn{
	font-size: 40rpx;
	position: absolute;
	right: 15px;
	top: 108px;
}
.list-share{
	margin: 0 auto;
	width: 330rpx;
	height: 74rpx;
	line-height: 74rpx;
	border-radius: 37rpx;
	border: none;
	color: white;
	font-size: 28rpx;
	opacity: 0.7;
	background-color: rgba(0, 0, 0, 0.4);
	margin-top: 10rpx;
}
.list-share text{
	margin-right: 16rpx;
}
.list-music{
	width: 100%;
	height: 100vh;
	margin-top: 40rpx;
	background-color: white;
	position: relative;
	border-radius: 70rpx;
	/* margin-bottom: 30rpx; */
}
.list-music-head{
	display: flex;
	position: absolute;
	top: 50rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}
.list-music-head :nth-child(1) text{
	font-size: 60rpx;
	margin-right: 40rpx;
}
.list-music-head :nth-child(2) text{
	font-size: 40rpx;
}
.list-music-head :nth-child(3){
	width: 200rpx;
	position: relative;
	left: 20rpx;
}
.list-music-head :nth-child(3) text{
	position: absolute;
	bottom: 10rpx;
	color: darkgray;
}
.list-body{
	width: 100%;
	background-color: white;
	position: absolute;
	top: 150rpx;
}
.list-body-item{
	height: 120rpx;
	width: 100%;
	position: relative;
}
.item-song-index{
	position: absolute;
	top: 43rpx;
	left: 35rpx;
	font-size: 34rpx;
	color: silver;
}
.item-song-info{
	width: 550rpx;
	height: 120rpx;

	position: absolute;
	left: 100rpx;
}
.item-song-info-name{
	width: 400rpx;
	height: 45rpx;
	margin-top: 10rpx;
	margin-left: 10rpx;
	font-size: 34rpx;
	overflow: hidden;
	text-overflow: ellipsis;
}
.item-song-info-player{
	height:  36rpx;
	width: 530rpx;
	margin-top: 5rpx;
	margin-left: 10rpx;
	font-size: 26rpx;
	color: silver;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.item-song-icon{
	position: absolute;
	right: 30rpx;
	top: 20rpx;
}
.item-song-icon text{
	font-size: 80rpx;
	color: silver;
}
</style>

